<template>
  <div>
    <Search></Search>
    <!--侧边导航-->
    <Navbar></Navbar>
    <!--主内容-->
    <div class="container">
      <el-row :gutter="20">
        <!--左-->
        <el-col :xs="24" :sm="24" :md="24" :lg="18">
          <el-card id="navBar0" class="border-radius mg-t-20" v-if="isLogin">
            <div slot="header">
              <span class="fs-14">我的收藏</span>
            </div>
            <Links :userId="userInfo.userId" :isPage="true" :listSize="16"/>
          </el-card>
          <el-card :id="'navBar' + (isLogin ? (index + 1):index)" class="border-radius mg-t-20" v-for="(item,index) in classifyList" :key="index" v-if="item.classifyStatus != '2'">
            <div slot="header">
              <span class="fs-14">{{item.classifyName}}</span>
              <nuxt-link class="fs-14" :to="'/classify/' + item.id" style="float: right;">
                <i class="el-icon-menu"></i>更多
              </nuxt-link>
            </div>
            <Links :classifyId="item.id" :listSize="listSize"></Links>
          </el-card>
          <el-card class="border-radius mg-t-20" v-show="classifyList.length == 0">
            <el-empty :image-size="200" description="暂无数据">
              <nuxt-link to="/push">
                <el-button type="primary" size="small">网站提交</el-button>
              </nuxt-link>
            </el-empty>
          </el-card>
        </el-col>
        <!--右-->
        <el-col :xs="24" :sm="24" :md="24" :lg="6">
          <el-card class="border-radius mg-t-20">
            <div slot="header">
              <span class="fs-14">统计</span>
            </div>
            <div class="fs-14 text-center">
              <span>已收录 <b class="f-red-color">{{ webCount }}</b> 个站点</span>
              <el-divider></el-divider>
              <span>待收录 <b class="f-red-color">{{ auditWebCount }}</b> 个站点</span>
              <el-divider></el-divider>
              <span>共有 <b class="f-red-color">{{ tagCount }}</b> 个标签</span>
              <el-divider></el-divider>
              <span>用户评论 <b class="f-red-color">{{ commentCount }}</b> 条</span>
            </div>
          </el-card>
          <el-card class="border-radius mg-t-20">
            <div slot="header">
              <span class="fs-14">随机推荐</span>
              <nuxt-link class="fs-14" to="/classify" style="float: right;">
                <i class="el-icon-menu"></i>更多
              </nuxt-link>
            </div>
            <TitleList></TitleList>
          </el-card>
          <el-card class="border-radius mg-t-20">
            <div slot="header">
              <span class="fs-14">热门标签</span>
              <nuxt-link class="fs-14" to="/tag" style="float: right;">
                <i class="el-icon-menu"></i>更多
              </nuxt-link>
            </div>
            <Tag :listSize="21"></Tag>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  layout: "navigation",
  computed: {
    ...mapState({
      isLogin: state => state.user.isLogin,
      userInfo: state => state.user.userInfo,
      classifyList: state => state.classifyList,
      nav_config: state => state.config
    })
  },
  //SEO优化
  head(){
    return{
      title: "首页" + this.nav_config.separate + this.nav_config.name,
      meta: [
        { name: 'keywords', content: this.nav_config.keywords },
        { hid: 'description', name: 'description', content: this.nav_config.description },
      ]
    }
  },
  async asyncData({params,query,req,redirect,error,app}){
    //获取站点数量
    let siteCount = await app.$api_links.count();
    //获取审核站点数量
    let auditSiteCount = await app.$api_links.auditCount();
    //获取标签数量
    let tagCount = await app.$api_label.count();
    //获取评论数量
    let commentCount = await app.$api_comments.count();
    return {
      webCount: siteCount.data,
      auditWebCount: auditSiteCount.data,
      tagCount: tagCount.data,
      commentCount: commentCount.data,
      // 站点显示数量
      listSize: app.store.state.config.indexLinkCount
    };
  },
}
</script>




